<template>
  <div class="app">
    <el-row class="el-row-ul">
      <el-col :span="8">
        <span class="span-text">编号</span>
        <span>{{ tableData2.storenumber }}</span>
      </el-col>
      <el-col :span="8">
        <span class="span-text">所属</span>
        <span>{{ tableData2.storeblone }}</span>
      </el-col>
      <el-col :span="8">
        <span class="span-text">名称</span>
        <span>{{ tableData2.storename }}</span>
      </el-col>
    </el-row>
    <el-row class="el-row-ul">
      <el-col :span="8">
        <span class="span-text">类型</span>
        <span>{{ tableData2.storetype }}</span>
      </el-col>
      <el-col :span="8">
        <span class="span-text">成本价¥</span>
        <span>{{ tableData2.costprice }}</span>
      </el-col>
      <el-col :span="8">
        <span class="span-text">原价¥</span>
        <span>{{ tableData2.originalcost }}</span>
      </el-col>
    </el-row>
    <el-row class="el-row-ul">
      <el-col :span="8">
        <span class="span-text">售价¥</span>
        <span>{{ tableData2.saleprice }}</span>
      </el-col>
      <el-col :span="8">
        <span class="span-text">库存量</span>
        <span>{{ tableData2.stock }}</span>
      </el-col>
      <el-col :span="8">
        <span class="span-text">月销售量</span>
        <span>{{ tableData2.monthlysales }}</span>
      </el-col>
    </el-row>
    <el-row class="el-row-ul">
      <el-col :span="8">
        <span class="span-text">总销售量</span>
        <span>{{ tableData2.totalsales }}</span>
      </el-col>
      <el-col :span="8">
        <span class="span-text">月销售额</span>
        <span>{{ tableData2.monthlyvolume }}</span>
      </el-col>
      <el-col :span="8">
        <span class="span-text">总销售额</span>
        <span>{{ tableData2.totalvolume }}</span>
      </el-col>
    </el-row>
    <el-row class="el-row-ul">
      <el-col :span="8">
        <span class="span-text">参与活动</span>
        <span>{{ tableData2.activity }}</span>
      </el-col>
      <el-col :span="8">
        <span class="span-text">热销</span>
        <el-radio-group v-model="tableData2.salelike">
          <el-radio-button label="是" />
          <el-radio-button label="否" />
        </el-radio-group>
      </el-col>
      <el-col :span="8">
        <span class="span-text">是否推荐</span>
        <el-radio-group v-model="tableData2.recommend">
          <el-radio-button label="是" />
          <el-radio-button label="否" />
        </el-radio-group>
      </el-col>
    </el-row>
    <el-row class="el-row-ul">
      <el-col :span="6">
        <span class="span-text">临保时长</span>
        <span>{{ tableData2.temporarytime }}</span>
      </el-col>
    </el-row>
    <h2>商品图片</h2>
    <el-col>
      <el-image :src="tableData2.goodsimage" class="image6" />
      <el-image :src="tableData2.goodsparticulars.image1" class="image6" />
      <el-image :src="tableData2.goodsparticulars.image2" class="image6" />
      <el-image :src="tableData2.goodsparticulars.image3" class="image6" />
      <el-image :src="tableData2.goodsparticulars.image4" class="image6" />
      <el-image :src="tableData2.goodsparticulars.image5" class="image6" />
    </el-col>
    <el-row :gutter="10">
      <h2>商品描述（支持富文本）</h2>
    </el-row>
    <el-input
      v-model="tableData2.storedescribe"
      type="textarea"
      :rows="4"
      placeholder="请输入备注"
    />
    <el-row :gutter="10">
      <h2>商品参加的活动</h2>
    </el-row>
    <el-row class="el-row-ul-s">
      <el-col :span="8">
        <span class="span-text">参与活动：</span>
        <span>打折促销</span>
      </el-col>
      <el-col :span="8">
        <span class="span-text">第一件是否优惠</span>
        <el-radio-group v-model="tableData2.firstdiscounts">
          <el-radio-button label="是" />
          <el-radio-button label="否" />
        </el-radio-group>
      </el-col>
      <el-col :span="8">
        <span class="span-text">促销价¥</span>
        <span>{{ tableData2.promotionprice }}</span>
      </el-col>
    </el-row>
    <div class="demo-drawer__footer">
      <el-button type="primary" @click="Modify()">确定</el-button>
      <el-button @click="cancelForm()">取 消</el-button>
    </div>
  </div>
</template>

<script>
import { getShoplist8 } from '@/api/getShoplist';
export default {
  name: 'GoodsDetails',
  props: {
    obtainid: {
      type: Object,
      required: true,
    },
  },
  data() {
    return {
      tableData2: {}, // 当前数据
    };
  },
  created() {
    this.nplll();
  },
  methods: {
    async nplll() {
      this.tableData2 = this.obtainid;// 当前数据
    },
    // 请求数据渲染列表
    async Modify() {
      console.log(this.tableData2);
      const data = await getShoplist8(this.tableData2);
      console.log(data);
    },
    async cancelForm() {
      console.log(1);
      // 还原数据
      this.tableData2 = this.obtainid;
      console.log(2);
    },
  },
};
</script>
<style lang="scss" scoped>
.app{
 padding-bottom: 60px;
}
.el-row-ul{
  margin: 15px 0px;
}
.el-row-ul-s{
  margin: 30px 0px;
}
.span-text{
  margin-right: 10px;
}

.image6{
  width: 190px;
  height: 115px;
  margin: 10px;
  border: 1px solid #DCDFE6;
}
::v-deep .el-radio-button__inner{
  padding: 0 15px;
}
.demo-drawer__footer{
  width: 660px;
  height: 60px;
  background-color: #ffffff;
  position: fixed;
  bottom: 0px;
  right: 0px;
  border-top:1px ridge #808080
}
.el-button{
  float:right;
  margin-top: 10px;
  margin-right:30px;
}
</style>
